<!-- 布局 -->
<meta charset="utf-8" />
<h1>登录</h1>
<link rel="stylesheet" href="./渐变布局.css">
<div class="jianbian"></div>

<form action="">
    <p>
        账号
        <input type="text">
    </p>
    <p>
        密码
        <input type="text">
    </p>    
    <p>
        验证码
        <input type="text">
        <img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt="" style="width: 150px;">
    </p>
    <p>
        记住8s密码
        <input type="checkbox">
    </p>
    <p>
        <input type="submit" value="登陆">
    </p>
</form>

<script src="./axios.js"></script>
<script>
    // 1-获取登录标签
    // 2-绑定点击事件
    // 3-事件处理中--阻止表单提交--获取表单数据--请求接口--失败弹框，成功-提示

    let submitBtn = document.querySelector('input[type=submit]')
    submitBtn.onclick = async function(evt){
        let e = evt || window.event
        // 阻止表单提交
        e.preventDefault()
        // 获取表单数据
        let uname = document.querySelectorAll('input')[0].value
        let pwd = document.querySelectorAll('input')[1].value
        let captcha = document.querySelectorAll('input')[2].value
        // 测试
        // console.log(uname,pwd,captcha)
        // 请求接口
        let res = await get(
            'http://kg.zhaodashen.cn/v1/public/login.jsp',
            {
                uname,pwd,captcha
            },
            'json'
        )
        console.log(res);
        // 成功弹框提示
        if(res.meta.state ===200)
        {
            alert(res.meta.msg)
            // 如果8天免登陆勾上checked就为真
            if(document.querySelector('input[type=checkbox]').checked)
            {
                // 设置8s过期
                localStorage.setItem('uname',res.data.uname)
                localStorage.setItem('expires',(new Date).getTime() + 1000*8)
            }else{
                // 没打钩就设置session
                sessionStorage.setItem('uname',res.data.uname)
            }
            // 跳转到会员页面
            location.href = './member.html'
        }else{
            // 登录失败弹框
            alert('登录失败！')
        }
    }

    // 点击验证码切换图片
    document.querySelector('img').onclick = function() {
    // this 事件源也就是img

        this.src = 'http://kg.zhaodashen.cn/v1/public/captcha.jsp?t'+(new Date).getTime()
}
</script>